<script lang="ts" setup>
import HeaderMenu from "@/components/HeaderMenu.vue";
import FooterComponent from "@/components/FooterComponent.vue";
import {onMounted, ref} from "vue";
import {searchGoods, addCart} from "@/api/goods.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {getGoodsInfo} from '@/api/goods'

import {useRoute} from 'vue-router'
const route = useRoute()
const goodsId = ref(0)
onMounted(()=>{

  goodsId.value = route.params.gid
  console.log('获取到的gid为：'+goodsId.value)

  getGoodsInfoFun()
})
//搜素
const searchGoodsInfo = ref({
  goodsName: '',
})
const searchGoodsFun = async ()=>{
  let result = await searchGoods(searchGoodsInfo.value.goodsName)
  if (result.data.code == 200) {
    ElMessage.success('搜索成功')
    console.log(result.data.data)
  }else {
    ElMessage.error('搜索失败')
  }
}
//获取商品信息
const goodsInfo = ref({})
const goodsImg = ref('')
const getGoodsInfoFun = async ()=>{
  let result = await getGoodsInfo(goodsId.value)
  if (result.data.code == 200) {
    ElMessage.success('获取商品信息成功')
    goodsInfo.value = result.data.data
    console.log(goodsInfo.value)
    totalPrice.value = goodsInfo.value.gprice
    // goodsImg.value = goodsInfo.value.gremain.replace('src','../')
    // console.log('goodsImg:'+goodsImg.value)
    // 调整图片路径
    /*goodsImg.value = require('@/assets/img/goods-consumer/goods/' + goodsInfo.value.gremain.split('/').pop());
    console.log('goodsImg:' + goodsImg.value);*/
    // 调整图片路径
    goodsImg.value = new URL(`../assets/img/goods-consumer/goods/${goodsInfo.value.gremain.split('/').pop()}`, import.meta.url).href;
    console.log('goodsImg:' + goodsImg.value);
  }else {
    ElMessage.error('获取商品信息失败')
  }
}

const totalPrice = ref(0)
const num = ref(1)
const handleChange = (value: number) => {
  console.log(value)
  totalPrice.value = goodsInfo.value.gprice * num.value
}

//加入购物车
const addGoodsCart = async ()=>{
  let result = await addCart(goodsInfo.value,num.value)
  if (result.data.code == 200) {
    ElMessage.success('加入购物车成功')
    // router.push()
  }else {
    ElMessage.error('加入购物车失败')
  }
}
</script>

<template>
  <body>
  <HeaderMenu></HeaderMenu>
  <div class="search_bar clearfix">
    <a href="/index" class="logo fl">
      <img src="../assets/img/user-consumer/jmlogo.png" class="index-logo">
    </a>
    <div class="search_con fl my-search">
      <input type="text" class="input_text fl" name="name" placeholder="搜索商品" v-model="searchGoodsInfo.goodsName">
      <button class="input_btn fr my-search-btn" @click="searchGoodsFun">搜索</button>
    </div>
  </div>

    <div class="navbar_con">
      <div class="navbar clearfix">
        <div class="subnav_con fl">
          <h1>全部商品分类</h1>
          <span></span>
          <ul class="subnav">
            <li><a href="#" class="fruit">新鲜水果</a></li>
            <li><a href="#" class="seafood">海鲜水产</a></li>
            <li><a href="#" class="meet">猪牛羊肉</a></li>
            <li><a href="#" class="egg">禽类蛋品</a></li>
            <li><a href="#" class="vegetables">新鲜蔬菜</a></li>
            <li><a href="#" class="ice">速冻食品</a></li>
          </ul>
        </div>
        <ul class="navlist fl">
          <li><a href="/index">首页</a></li>
        </ul>
      </div>
    </div>

    <div class="breadcrumb">
      <a href="#">全部分类</a>
      <span>></span>
      <a href="#">新鲜水果</a>
      <span>></span>
      <a href="#">商品详情</a>
    </div>

    <form action="goods/cart" method="get">
      <div class="goods_detail_con clearfix">

        <div class="goods_detail_pic fl">
<!--          <el-image style="width: 350px; height: 350px" :src="goodsInfo.gremain"/>-->
          <el-image style="width: 350px; height: 350px" :src="goodsImg"/>
<!--          <img src="../assets/img/goods-consumer/goods/maidong.png">-->
<!--          <img src="@/assets/img/goods-consumer/goods/maidong.png">-->
        </div>
<!--        <img :src="goodsInfo.gremain">-->
        <div class="goods_detail_list fr">
          <h3 class="new-goods-color" id="name">{{goodsInfo.gname}}</h3>
          <p>{{goodsInfo.gdetails}}</p>
          <div class="prize_bar">
				    <span class="show_pirze new-goods-color">¥
             <span class="firstPrice">{{goodsInfo.gprice}}</span>
             <em id="price">{{goodsInfo.gprice}}.00元</em>
				    </span>
          </div>
          <div class="" style="margin-top: 35px">
            <div class="num_name fl">数 量：</div>
            <el-input-number v-model="num" :min="1" :max="50" @change="handleChange" size="small" />
          </div>

          <div class="total">总价：<em class="new-goods-color">{{totalPrice}}元</em></div>
          <div class="total">库存：<em class="new-goods-color01">{{goodsInfo.stock}}件</em></div>
          <div class="operate_btn">
            <div class="guest_cart fr">
              <el-button color="#626aef" size="large" @click="addGoodsCart">加入购物车</el-button>
            </div>
          </div>
        </div>
      </div>

    </form>
    <FooterComponent></FooterComponent>
  </body>
</template>

<style scoped>
.index-logo {
  width: 100px;
  height: 40px;
}
.operate_btn {
  position: relative;
  top: -30px;
}
.my-search {
  border: #2d65d1 2px solid;
}
.my-search .my-search-btn, .my-fl {
  background-color: #2d65d1;
}
.navbar_con , .list_title{
  border-bottom-color: #3c6efd;
}
.navbar_con h1 {
  background-color: #2d65d1;
}
.my-fl-text {
  color: #3c6efd;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.breadcrumb a {
  color: #3c6efd;
}
.new-goods-color {
  color: #3c6efd;
}
.new-goods-color01 {
  color: #00bc6f;
}
.firstPrice {
  margin-right: 250px;
}
.prize_bar {
  background-color: #e9eeff;
}
.subnav {
  z-index: 100;
  border-top: #2d65d1;
}
</style>
